/* 周历视图样式 */
.weeklyCalendarView {
  @apply w-full space-y-4;
}

.headerCard {
  @apply shadow-sm;
}

.headerContent {
  @apply flex items-center justify-between;
}

.weekControls {
  @apply flex items-center gap-3;
}

.navButton {
  @apply flex items-center justify-center;
}

.weekRange {
  @apply text-lg font-medium text-gray-700 min-w-64 text-center;
}

.weekInfo {
  @apply flex items-center gap-3;
}

.countBadge :global(.ant-badge-count) {
  @apply bg-blue-500;
}

.calendarCard {
  @apply min-h-96;
}

.calendarGrid {
  @apply w-full;
}

.headerRow {
  @apply grid grid-cols-8 gap-1 mb-2;
  grid-template-columns: 100px repeat(7, 1fr);
}

.timeHeader {
  @apply flex items-center justify-center p-2 bg-gray-50 rounded font-medium text-gray-700;
}

.dateHeader {
  @apply flex flex-col items-center justify-center p-2 bg-gray-50 rounded;
}

.dateHeader.today {
  @apply bg-blue-50 text-blue-600;
}

.weekdayName {
  @apply text-sm font-medium;
}

.dateNumber {
  @apply text-lg font-bold;
}

.timeRow {
  @apply grid grid-cols-8 gap-1 mb-1;
  grid-template-columns: 100px repeat(7, 1fr);
}

.timeLabel {
  @apply flex items-center justify-center p-2 bg-gray-50 rounded;
}

.timeSlotText {
  @apply text-sm text-gray-600 text-center;
}

.gridCell {
  @apply min-h-20 p-1 border border-gray-200 rounded cursor-pointer transition-all duration-200 hover:bg-gray-50;
}

.gridCell.today {
  @apply border-blue-300 bg-blue-50;
}

.instancesContainer {
  @apply space-y-1 h-full;
}

.instanceItem {
  @apply flex items-center gap-2 p-1 bg-white rounded shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer;
}

.instanceIndicator {
  @apply w-2 h-2 rounded-full flex-shrink-0;
}

.instanceInfo {
  @apply flex-1 min-w-0;
}

.courseName {
  @apply text-xs font-medium text-gray-900 truncate;
}

.studentName {
  @apply text-xs text-gray-600 truncate;
}

.emptyCell {
  @apply flex items-center justify-center h-full opacity-0 hover:opacity-100 transition-opacity duration-200;
}

.addIcon {
  @apply text-gray-400 hover:text-blue-500;
}

.emptyState {
  @apply col-span-8 flex items-center justify-center py-16;
}

.emptyMessage {
  @apply text-gray-500 text-center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .headerRow,
  .timeRow {
    grid-template-columns: 80px repeat(7, 1fr);
  }
  
  .timeSlotText {
    @apply text-xs;
  }
  
  .weekRange {
    @apply text-base min-w-48;
  }
}

@media (max-width: 768px) {
  .headerContent {
    @apply flex-col items-start gap-3;
  }
  
  .weekControls {
    @apply w-full justify-center;
  }
  
  .weekInfo {
    @apply w-full justify-end;
  }
  
  .headerRow,
  .timeRow {
    grid-template-columns: 60px repeat(7, 1fr);
  }
  
  .gridCell {
    @apply min-h-16;
  }
  
  .timeHeader,
  .dateHeader,
  .timeLabel {
    @apply p-1;
  }
  
  .weekdayName {
    @apply text-xs;
  }
  
  .dateNumber {
    @apply text-sm;
  }
  
  .timeSlotText {
    @apply text-xs;
  }
  
  .courseName,
  .studentName {
    @apply text-xs;
  }
  
  .weekRange {
    @apply text-sm min-w-40;
  }
}

@media (max-width: 480px) {
  .headerRow,
  .timeRow {
    grid-template-columns: 50px repeat(7, 1fr);
  }
  
  .gridCell {
    @apply min-h-12;
  }
  
  .instanceItem {
    @apply p-0.5;
  }
  
  .instanceIndicator {
    @apply w-1.5 h-1.5;
  }
  
  .courseName,
  .studentName {
    @apply text-xs leading-tight;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .headerCard,
  .calendarCard {
    @apply bg-gray-800 border-gray-700;
  }
  
  .weekRange {
    @apply text-gray-200;
  }
  
  .timeHeader,
  .dateHeader,
  .timeLabel {
    @apply bg-gray-700 text-gray-200;
  }
  
  .dateHeader.today {
    @apply bg-blue-900 text-blue-300;
  }
  
  .timeSlotText {
    @apply text-gray-300;
  }
  
  .gridCell {
    @apply border-gray-600 hover:bg-gray-700;
  }
  
  .gridCell.today {
    @apply border-blue-600 bg-blue-900;
  }
  
  .instanceItem {
    @apply bg-gray-700 hover:bg-gray-600;
  }
  
  .courseName {
    @apply text-gray-100;
  }
  
  .studentName {
    @apply text-gray-300;
  }
  
  .addIcon {
    @apply text-gray-500 hover:text-blue-400;
  }
  
  .emptyMessage {
    @apply text-gray-400;
  }
}